// 等待页面结构加载完毕后执行
document.addEventListener('DOMContentLoaded', function () {
  initCrumbsNav();
  leftTabClick();
  bottomTabClick();
  rightPaneClick();
  rightMenu();
  initSmallpic();
  thumbImgClick();
  arrowClick();
  magnifyingGlass();
  initGoodBaseInfo();
  initGoodSizeInfo();
  goodsSizeClick();
  choosedClick();
  footerInputClick();
});

// 1. 实现面包屑导航
function initCrumbsNav() {
  // 1.获取数据源
  var data = goodData.path;
  var conPoinEle = document.querySelector('.wrap .con .conPoin');
  // 2.循环数据源，创建a节点，放到指定的页面容器中
  data.forEach(function (item, index) {
    let aNode = document.createElement('a');
    // 方式1：最后一项不能加href
    // if (index !== data.length - 1) {
    //   aNode.href = item.url
    // }
    // 方式2：最后一项不能加href
    if (item.url) {
      aNode.href = item.url;
    }
    aNode.innerText = item.title;
    // 追加
    conPoinEle.appendChild(aNode);
  });
}
// 2.实现左侧的选项卡切换querySelectorAll
function leftTabClick() {
  // 1. 获取h4标签
  let h4sEle = document.querySelectorAll(
    '.wrap .productDetail .aside .tabWrap h4'
  );
  let tabContents = document.querySelectorAll(
    '.wrap .productDetail .aside .tabContent > div'
  );
  // 2. 循环h4集合绑定事件
  h4sEle.forEach(function (h4Node, index) {
    // console.log(h4Node)
    h4Node.addEventListener('click', function () {
      // 3. 通过排他思想先移除所有元素类名，在给当前添加指定类名active
      h4sEle.forEach(function (h4Node) {
        h4Node.classList.remove('active');
      });
      this.classList.add('active');
      // 4. 通过排他思想先移除所有tab对应元素的类名，在通过下标找到指定tab选项卡内容添加active类名
      tabContents.forEach(function (tabNode) {
        tabNode.classList.remove('active');
      });
      tabContents[index].classList.add('active');
    });
  });
}
// 3.实现底部的选项卡切换
function bottomTabClick() {
  // 思路分析：
  // 1. 获取li标签
  let lisEle = document.querySelectorAll(
    '.wrap .productDetail .detail .intro .tabWrap li'
  );
  let divEle = document.querySelectorAll(
    '.wrap .productDetail .detail .intro .tabContent > div'
  );
  // 2. 循环li集合绑定事件
  lisEle.forEach(function (liNode, index) {
    liNode.onclick = function () {
      // 3. 通过排他思想先移除所有元素类名，在给当前添加指定类名active
      lisEle.forEach(function (item) {
        item.classList.remove('active');
      });
      liNode.classList.add('active');
      // 4. 通过排他思想先移除所有tab对应元素的类名，在通过下标找到指定tab选项卡内容添加active类名
      divEle.forEach(function (divNode) {
        divNode.classList.remove('active');
      });
      divEle[index].classList.add('active');
    };
  });
}
// 4.实现右侧面板单击折叠展开效果
function rightPaneClick() {
  // 思路分析：
  // 1. 找到`.but`元素
  let toolBar = document.querySelector('.wrap .toolBar');
  let but = document.querySelector('.wrap .toolBar .but');
  // 2. 绑定单击事件
  // 定义一个开关变量
  let isClose = true;
  toolBar.onclick = function () {
    // 3. ，根据此变量，动态去控制`.but`和`.toolBar`元素的类名切换即可
    if (isClose) {
      toolBar.classList.replace('toolWrap', 'toolOut');
      but.classList.replace('list', 'cross');
    } else {
      toolBar.classList.replace('toolOut', 'toolWrap');
      but.classList.replace('cross', 'list');
    }
    isClose = !isClose;
  };
}
// 5.实现右侧悬浮菜单功能
function rightMenu() {
  // 思路分析：
  // 1. 获取所有的li集合
  let lisEle = document.querySelectorAll('.wrap .toolBar .toolList li');
  // 2. 循环li集合，绑定鼠标悬浮和离开
  lisEle.forEach(function (lisEle) {
    let iNode = lisEle.querySelector('i');
    let emNode = lisEle.querySelector('em');
    //    悬浮时：
    lisEle.addEventListener('mouseover', function () {
      //    ​	-找到i标签，将bgc改为`rgb（200,17,34）`
      //    ​	-找到em标签，将left改为-62px
      iNode.style.backgroundColor = 'rgb(200,17,34)';
      emNode.style.left = '-62px';
    });
    //    离开时：
    lisEle.addEventListener('mouseout', function () {
      // ​	-找到i标签，将bgc改为`rgb（122,110,110）`
      // ​	-找到em标签，将left改为35px
      iNode.style.backgroundColor = 'rgb(122,110,110)';
      emNode.style.left = '35px';
    });
  });
}
// 6.实现渲染商品的图片和缩略图
function initSmallpic() {
  // 思路分析：
  // 数据来自哪里 ？ 来自于data.js -> imgsrc
  let imgsrc = goodData.imgsrc;
  // 1. 拿着数据创建img节点，并放到指定zoom容器中，
  let zoom = document.querySelector(
    '.wrap .con .mainCon .previewWrap .preview .zoom'
  );
  let list = document.querySelector(
    '.wrap .con .mainCon .previewWrap .specScroll .itemCon .list'
  );
  let imgNode = new Image();
  imgNode.src = imgsrc[0].s;
  zoom.appendChild(imgNode);
  // 2. 循环所有的图片，创建缩略图节点
  //    - 创建li节点

  imgsrc.forEach(function (imgObj) {
    let liNode = document.createElement('li');
    let thumbImgNode = new Image();
    thumbImgNode.src = imgObj.s;
    liNode.appendChild(thumbImgNode);
    list.appendChild(liNode);
  });
}
var index = 0;
// 7.实现单击缩略图切换图片thumbImgClick
function thumbImgClick() {
  // 思路分析：
  // 1. 获取所有li集合
  let SmallpicSrc = document.querySelector(
    '.wrap .con .mainCon .previewWrap .preview .zoom img'
  );
  let lisEle = document.querySelectorAll(
    '.wrap .con .mainCon .previewWrap .specScroll .itemCon .list li'
  );
  // 2. 循环li集合，都要绑定单击事件
  lisEle.forEach(function (liNode, i) {
    //    a: 把当前li下面的缩略图的src赋值上面的小图的src即可。
    liNode.onclick = function () {
      SmallpicSrc.src = liNode.firstElementChild.src;
      index = i;
    };
  });
}
// 8.实现缩略图左右箭头单击
function arrowClick() {
  // 思路分析：
  // 1. 获取左右节点
  let ul = document.querySelector(
    '.wrap .con .mainCon .previewWrap .specScroll .itemCon .list'
  );
  let leftArrow = document.querySelector(
    '.wrap .con .mainCon .previewWrap .specScroll .prev'
  );
  let rightArrow = document.querySelector(
    '.wrap .con .mainCon .previewWrap .specScroll .next'
  );
  // 75px = 50(li.offsetHeight) + 25(通过getComputedStyle的li的marginRight)
  let li = document.querySelectorAll(
    '.wrap .con .mainCon .previewWrap .specScroll .itemCon .list > li'
  );
  let ulLeft = 0;
  let liWidth = li[0].offsetWidth;
  let liRightMargin = parseInt(window.getComputedStyle(li[0]).marginRight);
  let stepLeft = liWidth + liRightMargin;
  // 2. 给左右节点绑定单击事件
  let maxLeft = (li.length - 5) * stepLeft;
  //    a: 让ul的left偏移量进行移动（75px）
  rightArrow.onclick = function () {
    if (ulLeft === maxLeft) {
      return;
    }
    ulLeft += stepLeft;
    ul.style.left = -ulLeft + 'px';
  };
  leftArrow.onclick = function () {
    if (ulLeft === 0) {
      return;
    }
    ulLeft -= stepLeft;
    ul.style.left = -ulLeft + 'px';
  };
}
// 9.实现放大镜
function magnifyingGlass() {
  // 思路：
  // 1. 给小图容器绑定mouseenter
  let smallImgBox = document.querySelector(
    '.wrap .con .mainCon .previewWrap .preview .zoom'
  );
  let preview = document.querySelector(
    '.wrap .con .mainCon .previewWrap .preview'
  );
  let mask = null;
  let bigImgBox = null;
  let bigImg = null;
  //    a： 创建遮盖、大图、大图容器mask  bigImgBox bigImg
  smallImgBox.onmouseenter = function () {
    //创建遮盖
    mask = document.createElement('div');
    mask.className = 'mask';
    //mask遮盖上树
    smallImgBox.appendChild(mask);
    //创建大图容器
    bigImgBox = document.createElement('div');
    bigImgBox.className = 'bigBox';
    //创建大图
    bigImg = new Image();
    bigImg.src = goodData.imgsrc[index].b;
    //大图上树
    bigImgBox.appendChild(bigImg);
    //大图容器上树
    preview.appendChild(bigImgBox);
  };
  // 2. 给小图容器绑定leave
  smallImgBox.onmouseleave = function () {
    //销毁
    smallImgBox.removeChild(mask);
    preview.removeChild(bigImgBox);
    bigImgBox = mask = bigImg = null;
  };
  // 3. 给小图容器绑定mousemove
  smallImgBox.onmousemove = function (event) {
    //让鼠标在正中心

    let MaskLeft =
      event.clientX -
      smallImgBox.getBoundingClientRect().left -
      mask.offsetWidth / 2;
    let MaskTop =
      event.clientY -
      smallImgBox.getBoundingClientRect().top -
      mask.offsetHeight / 2;
    let MaskMaxLeft = smallImgBox.clientWidth - mask.offsetWidth;
    let MaskMaxTop = smallImgBox.clientHeight - mask.offsetHeight;
    //左边界
    if (MaskLeft < 0) {
      MaskLeft = 0;
    }
    //上边界
    if (MaskTop < 0) {
      MaskTop = 0;
    }
    //右边界
    if (MaskLeft > MaskMaxLeft) {
      MaskLeft = MaskMaxLeft;
    }
    //下边界
    if (MaskTop > MaskMaxTop) {
      MaskTop = MaskMaxTop;
    }
    mask.style.left = MaskLeft + 'px';
    mask.style.top = MaskTop + 'px';
    //大图跟随移动:遮盖移动距离/遮盖最大移动距离=大图的移动距离/大图最大移动距离
    //大图最大移动距离 = 大图片Width - 大图容器width
    let bigImgMaxMaskLeft = bigImg.clientWidth - bigImgBox.clientWidth;
    let bigImgMaxMaskTop = bigImg.clientHeight - bigImgBox.clientHeight;
    //大图的移动距离 = (遮盖移动距离*大图最大移动距离)/遮盖最大移动距离
    let bigImgLeft = (MaskLeft * bigImgMaxMaskLeft) / MaskMaxLeft;
    let bigImgTop = (MaskTop * bigImgMaxMaskTop) / MaskMaxTop;
    //给大图赋值
    bigImg.style.left = -bigImgLeft + 'px';
    bigImg.style.top = -bigImgTop + 'px';
  };
}
// 10.渲染商品基本信息
let selectedNum = 0;
function initGoodBaseInfo() {
  // 思路：
  // 1. 获取data.js中的商品的基本信息
  let data = goodData.goodsDetail;
  // 2. 替换模板字符串中的数据
  let goodsInfo = `<h3 class="infoName">
              ${data.title}
            </h3>
            <p class="news">
            ${data.recommend}
            </p>
            <div class="priceArea">
              <div class="priceArea1">
                <div class="title">
                  价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
                </div>
                <div class="price">
                  <i>￥</i>
                  <em>${data.price}</em>
                  <span>降价通知</span>
                </div>
                <div class="remark">
                  <i>累计评价</i>
                  <span>${data.evaluateNum}</span>
                </div>
              </div>
              <div class="priceArea2">
                <div class="title">
                  促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销
                </div>
                <div class="fixWidth">
                  <i>${data.promoteSales.type}</i>
                  <span>
                 ${data.promoteSales.content}
                  </span>
                </div>
              </div>
            </div>
            <div class="support">
              <div>
                <div class="title">
                  支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持
                </div>
                <div class="fixWidth">
                ${data.support}
                </div>
              </div>
              <div>
                <div class="title">配&nbsp;送&nbsp;至</div>
                <div class="fixWidth">${data.address}</div>
              </div>
            </div>`;
  //上树
  let infoEle = document.querySelector('.wrap .con .mainCon .infoWrap .info1');
  infoEle.innerHTML = goodsInfo;
  // 13渲染附加商品区域的商品价格

  //底部商品复选区
  let leftPriceEle = document.querySelector(
    '.wrap .productDetail .detail .fitting .goodSuits .master p'
  );
  // - 左侧价格：即上面商品的原价
  leftPriceEle.innerText = '￥' + data.price;
  let inputsEls = document.querySelectorAll(
    '.wrap .productDetail .detail .fitting .goodSuits .suits input'
  );
  // - 右侧价格：原价 + 已勾选商品的总价
  let selectedTotalPrice = 0;
  inputsEls.forEach(function (input) {
    if (input.checked) {
      selectedNum++;
      selectedTotalPrice += parseInt(input.value);
    }
  });
  // console.log(selectedTotalPrice);
  let selectedEle = document.querySelector(
    '.wrap .productDetail .detail .fitting .goodSuits .result .selected'
  );
  selectedEle.innerText = selectedNum;
  //原价 + 已勾选商品的总价
  let rightPriceEle = document.querySelector(
    '.wrap .productDetail .detail .fitting .goodSuits .result .price'
  );
  rightPriceEle.innerText = '￥' + (selectedTotalPrice + data.price);
}
// 11.渲染商品规格信息
function initGoodSizeInfo() {
  // 思路：
  // 1. 获取data.js中的商品的规格信息
  let crumbData = goodData.goodsDetail.crumbData;
  let chooseArea = document.querySelector(
    '.wrap .con .mainCon .infoWrap .choose .chooseArea'
  );
  // 2. 循环数据，创建dt节点，dl中追加dt和dd
  crumbData.forEach(function (info) {
    //创建dl和dt节点
    let dlNode = document.createElement('dl');
    let dtNode = document.createElement('dt');
    dtNode.innerText = info.title;
    //上树
    dlNode.appendChild(dtNode);
    info.data.forEach(function (obj) {
      //创建dd节点
      let ddNode = document.createElement('dd');
      //给ddNode添加文本
      ddNode.innerText = obj.type;
      //创建dd的时候，绑定一个自定义属性price，记录价格，便于后面单击获取
      ddNode.setAttribute('price', obj.changePrice);
      //上树
      dlNode.appendChild(ddNode);
    });
    // 3. 上树
    chooseArea.appendChild(dlNode);
  });
}
//单击商品规格信息存入条件容器中
// 思路：
// 先创建一个条件数组，存放所有的规格条件 [0,0,0,0] 0 代表没有选择条件
var conditionArr = [0, 0, 0, 0]; // 存储我们选中的商品条件
// 12. 单击商品规则变化规格颜色
function goodsSizeClick() {
  // 思路：
  // 1. 找到所有的dl集合
  let dls = document.querySelectorAll(
    '.wrap .con .mainCon .infoWrap .choose .chooseArea dl'
  );
  //存储条件的容器元素
  let choosed = document.querySelector(
    '.wrap .con .mainCon .infoWrap .choose .chooseArea .choosed'
  );
  // 2. 循环dl集合，循环时，要找到当前dl下面的所有dd集合
  dls.forEach(function (dl, dlIndex) {
    // 3. 再给找到的dd集合循环绑定事件
    let dds = dl.querySelectorAll('dd');
    //dd集合循环绑定事件
    dds.forEach(function (dd) {
      dd.onclick = function () {
        //排他思想
        dds.forEach(function (item) {
          item.style.color = 'rgb(102,102,102)';
        });
        //4.给当前文本更改颜色
        this.style.color = 'red';
        // 5.将值存入到条件数组中
        conditionArr[dlIndex] = {
          text: this.innerText,
          //2. 单击dd的时候，获取价格，存入条件数组中。
          price: parseInt(this.getAttribute('price')),
        };
        // 重新计算价格
        calcTotalPrice();

        //6.根据条件数组循环创建节点，并上树
        choosed.innerText = ''; //清空条件容器
        conditionArr.forEach(function (obj, dlIndex) {
          if (!obj) {
            return;
          }
          let mark = document.createElement('mark');
          mark.innerText = obj.text;
          let a = document.createElement('a');
          //将dl的下标存储在a标签上,便于删除的时候，取出来，找到对应的下标的dl
          a.setAttribute('dlIndex', dlIndex);
          a.innerText = 'X';
          mark.appendChild(a);
          //上树到指定容器
          choosed.appendChild(mark);
        });
      };
    });
  });
}
// 13# 删除条件节点
function choosedClick() {
  // 1. 将条件节点的单击事件委托给其父容器（.choosed）
  let choosed = document.querySelector(
    '.wrap .con .mainCon .infoWrap .choose .chooseArea .choosed'
  );
  // 2. 单击时候
  choosed.onclick = function (event) {
    // console.log(event)
    //a.如果目标元素是a节点，
    if (event.target.localName !== 'a') {
      return;
    }
    let aNode = event.target;
    // console.log(aNode)
    // 则要将当前mark节点移除
    choosed.removeChild(aNode.parentElement);
    //b.并要找到对应下标的dl节点，找到所有dd节点，文字颜色都改为灰色，下标为0的dd改为红色
    //找到对应dl下标
    let dlIndex = aNode.getAttribute('dlIndex');
    let dl = document.querySelectorAll(
      '.wrap .con .mainCon .infoWrap .choose .chooseArea dl'
    )[dlIndex];
    //找到dd
    let dds = dl.querySelectorAll('dd');
    dds.forEach(function (dd) {
      dd.style.color = 'rgb(102,102,102)';
    });
    dds[0].style.color = 'red';
    //c.对应下标的条件数组值要重置为0
    conditionArr[dlIndex] = 0;
    calcTotalPrice();
  };
}
//  添加删除商品规格实现价格联动
function calcTotalPrice() {
  //
  let priceEle = document.querySelector(
    '.wrap .con .mainCon .infoWrap .info1 .priceArea .priceArea1 .price em'
  );
  let leftPriceEle = document.querySelector(
    '.wrap .productDetail .detail .fitting .goodSuits .master p'
  );
  let rightPriceEle = document.querySelector(
    '.wrap .productDetail .detail .fitting .goodSuits .result .price'
  );
  let inputs = document.querySelectorAll(
    '.wrap .productDetail .detail .fitting .goodSuits .suits input'
  );
  //商品原价
  let originPrice = goodData.goodsDetail.price;
  let sizeTotalPrice = 0;
  conditionArr.forEach(function (obj) {
    if (!obj) {
      return;
    }
    sizeTotalPrice += obj.price;
  });
  //汇总后的价格
  let totalPrice = originPrice + sizeTotalPrice;
  priceEle.innerText = totalPrice;
  //  将汇总后的价格赋值给附选商品左侧元素
  leftPriceEle.innerText = '￥' + totalPrice;
  //底部右侧价格：底部左侧价格 + 已勾选的商品的总价
  let selectedTotalPrice = 0;
  inputs.forEach(function (input) {
    if (input.checked) {
      selectedTotalPrice += parseInt(input.value);
    }
  });
  rightPriceEle.innerText = '￥' + (totalPrice + selectedTotalPrice);
}
// 14底部附选商品input单击事件
function footerInputClick() {
  // 思路分析：
  // 1. 找到底部所有的input元素
  let inputs = document.querySelectorAll(
    '.wrap .productDetail .detail .fitting .goodSuits .suits input'
  );
  let selectedEle = document.querySelector(
    '.wrap .productDetail .detail .fitting .goodSuits .result .selected'
  );
  let rightPriceEle = document.querySelector(
    '.wrap .productDetail .detail .fitting .goodSuits .result .price'
  );

  // 2. 循环绑定单击事件
  inputs.forEach(function (input) {
    input.onclick = function () {
      //    a: 计算出总的勾选数量的商品，并展示到页面
      let rightTotalPrice = parseInt(rightPriceEle.innerText.substring(1));
      console.log(rightTotalPrice);
      if (this.checked) {
        //已勾选，拿原已勾选的数量累加
        selectedNum++;
        //b:动态计算出右侧的套餐价
        rightTotalPrice += parseInt(this.value);
      } else {
        //未勾选，拿原已勾选的数量累减
        selectedNum--;
        //b:动态计算出右侧的套餐价
        rightTotalPrice -= parseInt(this.value);
      }
      console.log(rightTotalPrice);
      selectedEle.innerText = selectedNum;
      // console.log(selectedNum,this.checked);
      rightPriceEle.innerText = '￥' + rightTotalPrice;
    };
  });
}
